<script setup lang="ts" name="userList">
import { defineProps, watchEffect, defineAsyncComponent } from 'vue'
import useUserList from '@/components/index/followig/hooks/userList'
const { users, select } = useUserList()
const props = defineProps<{
  searchKey?: string
}>()
watchEffect((onInvalidate) => {
  onInvalidate(() => clearTimeout(timeoutId))
  let timeoutId: ReturnType<typeof setTimeout> | undefined = undefined
  timeoutId = setTimeout(() => {
    if (!props.searchKey) {
      select('')
    } else {
      select(props.searchKey)
    }
  }, 1000)
})
</script>
<template>
  <component
    :is="
      users.length !== 0
        ? defineAsyncComponent(() => import('@/components/index/followig/userDate.vue'))
        : defineAsyncComponent(() => import('@/components/resultNull.vue'))
    "
  ></component>
</template>

<style scoped lang="less"></style>
